<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input
        v-model="listQuery.content"
        placeholder="评论内容"
        style="width: 200px;"
        class="filter-item"
        @keyup.enter="handleFilter"
      />
      <el-select v-model="listQuery.status" placeholder="状态" clearable style="width: 120px" class="filter-item">
        <el-option v-for="item in statusOptions" :key="item.key" :label="item.display_name" :value="item.key" />
      </el-select>
      <el-button v-waves class="filter-item" type="primary" icon="Search" @click="handleFilter">
        搜索
      </el-button>
    </div>

    <el-table
      :key="tableKey"
      v-loading="listLoading"
      :data="list"
      border
      fit
      highlight-current-row
      style="width: 100%;"
    >
      <el-table-column label="ID" prop="id" sortable="custom" align="center" width="80">
        <template #default="{row}">
          <span>{{ row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="评论内容" min-width="250px" align="left">
        <template #default="{row}">
          <div class="comment-content">{{ row.content }}</div>
        </template>
      </el-table-column>
      <el-table-column label="评论者" width="120px" align="center">
        <template #default="{row}">
          <span>{{ row.username }}</span>
        </template>
      </el-table-column>
      <el-table-column label="文章标题" width="200px" align="center">
        <template #default="{row}">
          <span class="link-type" @click="viewArticle(row.articleId)">{{ row.articleTitle }}</span>
        </template>
      </el-table-column>
      <el-table-column label="状态" width="100px" align="center">
        <template #default="{row}">
          <el-tag :type="row.status | statusFilter">
            {{ row.status | statusDisplayFilter }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="IP地址" width="120px" align="center">
        <template #default="{row}">
          <span>{{ row.ipAddress }}</span>
        </template>
      </el-table-column>
      <el-table-column label="评论时间" width="150px" align="center">
        <template #default="{row}">
          <span>{{ parseTime(row.createTime, '{y}-{m}-{d} {h}:{i}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="200" class-name="small-padding fixed-width">
        <template #default="{row,$index}">
          <el-button v-if="row.status==='pending'" size="small" type="success" @click="handleModifyStatus(row,'approved')">
            通过
          </el-button>
          <el-button v-if="row.status!=='rejected'" size="small" type="warning" @click="handleModifyStatus(row,'rejected')">
            拒绝
          </el-button>
          <el-button size="small" type="danger" @click="handleDelete(row,$index)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="listQuery.current" :limit.sync="listQuery.pageSize" @pagination="getList" />

    <!-- 评论详情对话框 -->
    <el-dialog title="评论详情" v-model="detailDialogVisible" width="600px">
      <div v-if="currentComment">
        <el-descriptions :column="2" border>
          <el-descriptions-item label="评论者">{{ currentComment.username }}</el-descriptions-item>
          <el-descriptions-item label="邮箱">{{ currentComment.email }}</el-descriptions-item>
          <el-descriptions-item label="IP地址">{{ currentComment.ipAddress }}</el-descriptions-item>
          <el-descriptions-item label="评论时间">{{ parseTime(currentComment.createTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</el-descriptions-item>
          <el-descriptions-item label="文章标题" :span="2">{{ currentComment.articleTitle }}</el-descriptions-item>
          <el-descriptions-item label="评论内容" :span="2">
            <div class="comment-detail">{{ currentComment.content }}</div>
          </el-descriptions-item>
        </el-descriptions>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="detailDialogVisible = false">关闭</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { parseTime } from '@/utils'
import Pagination from '@/components/Pagination/index.vue'

const tableKey = ref(0)
const list = ref([])
const total = ref(0)
const listLoading = ref(true)
const detailDialogVisible = ref(false)
const currentComment = ref(null)

const listQuery = reactive({
  current: 1,
  pageSize: 20,
  content: undefined,
  status: undefined
})

const statusOptions = [
  { key: 'pending', display_name: '待审核' },
  { key: 'approved', display_name: '已通过' },
  { key: 'rejected', display_name: '已拒绝' }
]

// 状态过滤器
const statusFilter = computed(() => {
  return (status) => {
    const statusMap = {
      pending: 'warning',
      approved: 'success',
      rejected: 'danger'
    }
    return statusMap[status]
  }
})

const statusDisplayFilter = computed(() => {
  return (status) => {
    const statusMap = {
      pending: '待审核',
      approved: '已通过',
      rejected: '已拒绝'
    }
    return statusMap[status]
  }
})

onMounted(() => {
  getList()
})

function getList() {
  listLoading.value = true
  // 模拟数据
  setTimeout(() => {
    list.value = [
      {
        id: 1,
        content: '这篇文章写得很好，学到了很多新知识！',
        username: '张三',
        email: 'zhangsan@example.com',
        articleId: 1,
        articleTitle: 'Vue 3.0 新特性详解',
        status: 'approved',
        ipAddress: '192.168.1.100',
        createTime: new Date()
      },
      {
        id: 2,
        content: '有些地方还不够详细，希望能补充一下实际应用的例子。',
        username: '李四',
        email: 'lisi@example.com',
        articleId: 1,
        articleTitle: 'Vue 3.0 新特性详解',
        status: 'pending',
        ipAddress: '192.168.1.101',
        createTime: new Date()
      },
      {
        id: 3,
        content: '垃圾文章，浪费时间！',
        username: '恶意用户',
        email: 'bad@example.com',
        articleId: 2,
        articleTitle: 'React Hooks 最佳实践',
        status: 'rejected',
        ipAddress: '192.168.1.102',
        createTime: new Date()
      },
      {
        id: 4,
        content: '感谢分享，对我的项目很有帮助！',
        username: '王五',
        email: 'wangwu@example.com',
        articleId: 3,
        articleTitle: 'Node.js 性能优化指南',
        status: 'approved',
        ipAddress: '192.168.1.103',
        createTime: new Date()
      }
    ]
    total.value = 4
    listLoading.value = false
  }, 1000)
}

function handleFilter() {
  listQuery.current = 1
  getList()
}

function handleModifyStatus(row, status) {
  const statusText = status === 'approved' ? '通过' : '拒绝'
  ElMessageBox.confirm(`确定要${statusText}这条评论吗?`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    row.status = status
    ElMessage({
      message: `评论${statusText}成功`,
      type: 'success'
    })
  })
}

function viewArticle(articleId) {
  ElMessage({
    message: `查看文章 ID: ${articleId}`,
    type: 'info'
  })
}

function showDetail(row) {
  currentComment.value = row
  detailDialogVisible.value = true
}

function handleDelete(row, index) {
  ElMessageBox.confirm('此操作将永久删除该评论, 是否继续?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    list.value.splice(index, 1)
    ElMessage({
      type: 'success',
      message: '删除成功!'
    })
  })
}
</script>

<style lang="scss" scoped>
.app-container {
  padding: 20px;
}

.filter-container {
  padding-bottom: 10px;
  
  .filter-item {
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 10px;
    margin-right: 10px;
  }
}

.comment-content {
  max-width: 250px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  
  &:hover {
    color: #409EFF;
  }
}

.comment-detail {
  line-height: 1.6;
  word-break: break-all;
}

.link-type {
  color: #409EFF;
  cursor: pointer;
  
  &:hover {
    color: #66b1ff;
  }
}
</style>